<template>
    <div class="addstu-container">
        <BreadCrumb :currentPath="currentPath"></BreadCrumb>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <div class="column">
                <el-form-item label="姓名" prop="sname">
                    <el-input v-model="ruleForm.sname"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="sage">
                    <el-input type="number" v-model="ruleForm.sage"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input type="number" v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="课时" prop="course">
                    <el-input type="number" v-model="ruleForm.course"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="cno">
                    <el-select v-model="ruleForm.cno" placeholder="请选择班级">
                        <el-option
                            v-for="item in classList"
                            :key="item.id"
                            :label="item.cname"
                            :value="item.cno"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师" prop="tno">
                    <el-select v-model="ruleForm.tno" placeholder="请选择教师">
                        <el-option
                            v-for="item in teacherList"
                            :key="item.id"
                            :label="item.tname"
                            :value="item.tno"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import BreadCrumb from "@/components/BreadCrumb.vue"
import { addStudent } from "@/api/studentApi.js"
import { getAllTeacher } from "@/api/teacherApi.js"
import { getAllClass } from "@/api/classApi.js"

export default {
    components: {
        BreadCrumb
    },
    data() {
        return {
            currentPath: [
                { name: "学生管理", path: "/" },
                { name: "添加学生" },
            ],
            classList: [],
            teacherList: [],
            ruleForm: {
                sname: '',
                sage: '',
                phone: '',
                course: '',
                cno: '',
                tno: '',
                address: '',
            },
            rules: {
                sname: [
                    { required: true, message: '请输入学生姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                sage: [
                    { required: true, message: '请输入学生年龄', trigger: 'blur' },
                    { min: 1, max: 2, message: '年龄不合法', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 7, max: 13, message: '长度在 7 到13 个字符', trigger: 'blur' }
                ],
                course: [
                    { required: true, message: '请输入课时', trigger: 'blur' },
                ],
                cno: [
                    { required: true, message: '请选择班级', trigger: 'change' }
                ],
                tno: [
                    { required: true, message: '请选择教师', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            try {
                let res1 = await getAllTeacher()
                if (res1.data.status == 0) {
                    this.teacherList = res1.data.data
                }
                let res2 = await getAllClass()
                if (res2.data.status == 0) {
                    this.classList = res2.data.data
                }

            } catch (e) {
                this.$message.error(e)
            }
        },
        submitForm(formName) {
            console.log(this.ruleForm);
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    try {
                        let res = await addStudent(this.ruleForm)
                        this.$message.success('新增成功')

                        this.$router.push('/')

                    } catch (e) {
                        this.$message.error(e)
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.addstu-container {
    .column {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-wrap: wrap;
        .el-form-item {
            flex: 680px 0 0;
            .dis {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                .el-input {
                    flex: 320px 0 0;
                }
            }
        }
    }
}
</style>